import React, { Component, HTMLAttributes } from 'react';
import classnames from 'classnames';
import AntdIcon, { BorderOutlined } from '@ant-design/icons';

interface IconProps extends HTMLAttributes<HTMLElement> {
  prefixCls?: string;
  type: any;
  className?: string;
  children?: React.ReactNode;
  font?: string;
  antd?: boolean;
  spin?: boolean;
}

class Icon extends Component<IconProps> {
  static defaultProps = {
    prefixCls: 'antui-icon',
    className: '',
    font: 'ad'
  };

  render() {
    const {
      prefixCls,
      type,
      className,
      children,
      font,
      antd,
      spin,
      ...props
    } = this.props;

    const cn = classnames(
      prefixCls,
      {
        [font!]: font,
        [font + '-' + type]: font && type,
        spin
      },
      className
    );

    if (/^&#x.+;$/.test(type)) {
      return (
        <i
          className={cn}
          {...props}
          dangerouslySetInnerHTML={{ __html: type }}
        />
      );
    }

    if (antd) {
      const antdcn = classnames(prefixCls, className);

      if (typeof type === 'string') {
        // const Icons = require('@ant-design/icons')[type] || BorderOutlined;
        const Icons = AntdIcon || BorderOutlined;
        return <Icons className={antdcn} spin={spin} {...props} />;

      } else if (React.isValidElement(type)) {
        return (
          <AntdIcon
            component={() => type}
            className={antdcn}
            spin={spin}
            {...props}
          />
        );
      }
    }

    return (
      <i className={cn} {...props}>
        {children}
      </i>
    );
  }
}

export default Icon;